<template>
  <!-- 折线图3  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  //props.carData
  let xAxis = [
    "2023/10/09",
    "2023/10/16",
    "2023/10/23",
    "2023/10/30",
    "2023/11/06",
    "2023/11/13",
    "2023/11/20",
    "2023/11/27",
  ];
  let data1 = [68.82, 67.57, 54.07, 41.56, 32.04, 6.71, 22.74, 274.58];
  let data2 = [90.52, 86.02, 72.61, 81.98, 73.49, 45.65, 70.38, 212.88];
  let data3 = [11.2, 14.0, 150.0, 140.0, 10.0, 140.0, 16.0, 14.0];

  let option = {
    backgroundColor: "rgb(19, 47, 74)",
    textStyle: {
      color: "#FFF",
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "30%",
      containLabel: true,
    },
    title: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#0A2945",
      textStyle: {
        color: "#FFF",
      },
      extraCssText: "box-shadow: 1px 1px 5px #fff",
    },
    legend: {
      textStyle: {
        color: "#d0d0d0",
        align: "center",
        fontSize: 10,
      },
      top: "2%",
      x: "center",
    },
    xAxis: {
      type: "category",
      data: xAxis.map((week) => `WK${week.slice(5)}`),
    },
    yAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            opacity: 0.5,
          },
        },
      },
      {
        type: "value",
        splitLine: {
          show: false,

          lineStyle: {
            opacity: 0.5,
          },
        },
        yAxisIndex: 1,
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: "8%",
        start: 10,
        end: 90,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        color: "#fff",
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: "C-FCST",
        type: "line",
        stack: "Total",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 13,
        label: {
          show: false,
          position: "top",
          fontSize: 14,
          formatter: "{c}%",
        },

        data: data1,
      },
      {
        name: "MPSP",
        type: "line",
        stack: "Total",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 13,
        label: {
          show: false,
          position: "top",
          fontSize: 14,

          formatter: "{c}%",
        },
        data: data2,
      },
      {
        name: "AI A-FCST",
        type: "line",
        stack: "Total",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 13,
        label: {
          show: false,
          position: "top",
          fontSize: 14,
          formatter: "{c}%",
        },

        data: data3,
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
